/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-11-08 22:41:51
 */
 import React, { useEffect } from "react";
 import { View, Image } from "@tarojs/components";

 import { AtRate } from 'taro-ui'

 import StroeIcon from '@/src/assets/icon/store.png'
 import PinIcon from '@/src/assets/icon/pin.png'

 import Labels from './labels'

 import styles from './index.module.scss'

 const ProdItem = ({ shop, clickHandle = () => {} }) => {
   const {
    shopImageUrl,
    cateName,
    shopName,
    monthSalesNum,
    hasJobPosition,
    deliveryMinute,
    distance,
    score,
    startPrice,
    activities,
    open = true,
    shopSetVos = []
  } = shop
   return (
     <View className={styles.prodItem} onClick={clickHandle}>
       <View className={styles.header}>
         <View className={styles.imgBox}>
            <Image className={`${styles.img} ${!open ? styles.grayBg : ''}`} src={shopImageUrl} />
         </View>
         <View className={styles.info}>
           <View className={styles.title}>{shopName}</View>
           <View className={styles.baseI}>
             <View className={styles.lf}>
              <View className={styles.starImg}>
                  <AtRate size={15} value={score} />
                <View className={styles.scoreNum}>{score}</View>
              </View>
              <View className={styles.saleCount}>月销{monthSalesNum}</View>
             </View>
             <View className={styles.timeDistance}>
               <View className={styles.showLine}>{deliveryMinute}分钟|</View>
               <View className={styles.showLine}>{distance}m</View>
              </View>
           </View>
           <View className={styles.expCon}>

            <View className={styles.expPrice}>起送￥{startPrice}</View>
            <View className={styles.shopSetVos}>
            {
              [].concat(shopSetVos).reverse().map((vos, index) => {
                return <View key={index}>{index !== 0 ? '|' : ''}{vos.typeName}</View>
              })
            }
            </View>
           </View>
          <View className={styles.description}>
            {/* <View className={styles.pIcon}></View> */}
            <Image src={StroeIcon} className={styles.pIcon} />
            <View className={styles.desc}>{cateName}</View>
            { hasJobPosition && <Image src={PinIcon} className={styles.lightImg} />}

          </View>
         </View>
       </View>
       <View className={styles.outIntime}></View>
       <View className={styles.footer}>
         { activities.length ? <Labels labelList={activities} /> : null }
       </View>
     </View>
   );
 }

 export default ProdItem
